<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商户入驻 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .header {
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        .step-number {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: #e0e0e0;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-bottom: 8px;
        }
        .step-item.active .step-number {
            background-color: #0052d9;
        }
        .step-item.completed .step-number {
            background-color: #52c41a;
        }
        .step-title {
            font-size: 12px;
            color: #999;
        }
        .step-item.active .step-title {
            color: #0052d9;
            font-weight: 500;
        }
        .step-item.completed .step-title {
            color: #52c41a;
        }
        .step-line {
            position: absolute;
            top: 14px;
            left: 50%;
            right: -50%;
            height: 2px;
            background-color: #e0e0e0;
            z-index: -1;
        }
        .step-item:last-child .step-line {
            display: none;
        }
        .step-item.completed .step-line {
            background-color: #52c41a;
        }
        .form-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 16px;
        }
        .section-title {
            padding: 16px;
            font-size: 16px;
            font-weight: 500;
            border-bottom: 1px solid #f0f0f0;
        }
        .form-group {
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        .form-group:last-child {
            border-bottom: none;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }
        .required:after {
            content: "*";
            color: #f5222d;
            margin-left: 4px;
        }
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 14px;
        }
        .form-input:focus {
            border-color: #0052d9;
            outline: none;
        }
        .hint-text {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }
        .upload-area {
            border: 1px dashed #d9d9d9;
            border-radius: 4px;
            padding: 20px;
            text-align: center;
            background-color: #fafafa;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #0052d9;
        }
        .upload-icon {
            font-size: 24px;
            color: #999;
            margin-bottom: 8px;
        }
        .preview-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 8px;
            margin-bottom: 8px;
        }
        .radio-group {
            display: flex;
            gap: 16px;
        }
        .radio-item {
            display: flex;
            align-items: center;
        }
        .checkbox-item {
            display: flex;
            align-items: flex-start;
            margin-top: 8px;
        }
        .checkbox-item input {
            margin-top: 3px;
            margin-right: 8px;
        }
        .primary-btn {
            background-color: #0052d9;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .primary-btn:hover {
            background-color: #0045b8;
        }
        .outline-btn {
            background-color: white;
            color: #0052d9;
            border: 1px solid #0052d9;
            border-radius: 4px;
            padding: 10px 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .outline-btn:hover {
            background-color: #f0f7ff;
        }
    </style>
</head>
<body>
    <div class="pb-6">
        <!-- 顶部导航 -->
        <div class="header flex items-center p-4 border-b">
            <div class="w-8 h-8 flex items-center justify-center" onclick="history.back()">
                <i class="t-icon t-icon-chevron-left text-xl"></i>
            </div>
            <h1 class="text-lg font-medium flex-1 text-center">商户入驻</h1>
            <div class="w-8 h-8"></div>
        </div>
        
        <!-- 步骤导航 -->
        <div class="bg-white p-4 flex justify-between mb-4">
            <div class="step-item active">
                <div class="step-number">1</div>
                <div class="step-title">填写信息</div>
                <div class="step-line"></div>
            </div>
            <div class="step-item">
                <div class="step-number">2</div>
                <div class="step-title">资质认证</div>
                <div class="step-line"></div>
            </div>
            <div class="step-item">
                <div class="step-number">3</div>
                <div class="step-title">提交审核</div>
                <div class="step-line"></div>
            </div>
            <div class="step-item">
                <div class="step-number">4</div>
                <div class="step-title">入驻成功</div>
            </div>
        </div>
        
        <!-- 入驻表单 -->
        <div class="px-4">
            <!-- 基本信息 -->
            <div class="form-section">
                <div class="section-title">基本信息</div>
                
                <div class="form-group">
                    <label class="form-label required">商户类型</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input type="radio" id="type-company" name="merchant-type" checked>
                            <label for="type-company" class="ml-2">企业商户</label>
                        </div>
                        <div class="radio-item">
                            <input type="radio" id="type-personal" name="merchant-type">
                            <label for="type-personal" class="ml-2">个体商户</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">店铺名称</label>
                    <input type="text" class="form-input" placeholder="请输入店铺名称">
                    <div class="hint-text">店铺名称将显示给用户，请填写真实、规范的店铺名称</div>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">主营类目</label>
                    <select class="form-input">
                        <option value="">请选择主营类目</option>
                        <option value="1">景区门票</option>
                        <option value="2">民族特产</option>
                        <option value="3">手工艺品</option>
                        <option value="4">康养服务</option>
                        <option value="5">酒店住宿</option>
                        <option value="6">餐饮美食</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">经营地区</label>
                    <div class="flex gap-2">
                        <select class="form-input flex-1">
                            <option value="">省份</option>
                            <option value="guizhou" selected>贵州省</option>
                        </select>
                        <select class="form-input flex-1">
                            <option value="">城市</option>
                            <option value="guiyang">贵阳市</option>
                            <option value="zunyi">遵义市</option>
                            <option value="anshun">安顺市</option>
                            <option value="bijie">毕节市</option>
                            <option value="tongren">铜仁市</option>
                            <option value="qianxinan">黔西南州</option>
                            <option value="qiandongnan">黔东南州</option>
                            <option value="qiannan">黔南州</option>
                        </select>
                        <select class="form-input flex-1">
                            <option value="">区县</option>
                            <option value="nanming">南明区</option>
                            <option value="yunyan">云岩区</option>
                            <option value="huaxi">花溪区</option>
                            <option value="wudang">乌当区</option>
                            <option value="baiyun">白云区</option>
                            <option value="guanshanhu">观山湖区</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">详细地址</label>
                    <input type="text" class="form-input" placeholder="请输入详细地址">
                </div>
            </div>
            
            <!-- 联系人信息 -->
            <div class="form-section">
                <div class="section-title">联系人信息</div>
                
                <div class="form-group">
                    <label class="form-label required">联系人姓名</label>
                    <input type="text" class="form-input" placeholder="请输入联系人姓名">
                </div>
                
                <div class="form-group">
                    <label class="form-label required">联系电话</label>
                    <input type="tel" class="form-input" placeholder="请输入联系电话">
                </div>
                
                <div class="form-group">
                    <label class="form-label">电子邮箱</label>
                    <input type="email" class="form-input" placeholder="请输入电子邮箱">
                </div>
            </div>
            
            <!-- 店铺信息 -->
            <div class="form-section">
                <div class="section-title">店铺信息</div>
                
                <div class="form-group">
                    <label class="form-label required">店铺简介</label>
                    <textarea class="form-input" rows="4" placeholder="请简要介绍您的店铺特色、经营范围等信息（100-300字）"></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">店铺Logo</label>
                    <div class="upload-area">
                        <i class="t-icon t-icon-upload upload-icon"></i>
                        <div class="text-sm">点击上传或拖拽图片到此处</div>
                        <div class="text-xs text-gray-400 mt-1">建议尺寸：200x200px，JPG/PNG格式</div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label required">店铺封面图</label>
                    <div class="upload-area">
                        <i class="t-icon t-icon-upload upload-icon"></i>
                        <div class="text-sm">点击上传或拖拽图片到此处</div>
                        <div class="text-xs text-gray-400 mt-1">建议尺寸：750x420px，JPG/PNG格式</div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">店铺实景照片</label>
                    <div class="upload-area">
                        <i class="t-icon t-icon-upload upload-icon"></i>
                        <div class="text-sm">点击上传或拖拽图片到此处（最多5张）</div>
                        <div class="text-xs text-gray-400 mt-1">建议尺寸：750x500px，JPG/PNG格式</div>
                    </div>
                    <div class="flex flex-wrap mt-3">
                        <img src="https://via.placeholder.com/80?text=实景1" class="preview-image" alt="预览图">
                        <img src="https://via.placeholder.com/80?text=实景2" class="preview-image" alt="预览图">
                    </div>
                </div>
            </div>
            
            <!-- 协议同意 -->
            <div class="form-section">
                <div class="form-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="agreement" checked>
                        <label for="agreement">我已阅读并同意<a href="#" class="text-blue-600">《贵州四季康养文旅商户入驻协议》</a>和<a href="#" class="text-blue-600">《平台服务协议》</a></label>
                    </div>
                </div>
            </div>
            
            <!-- 底部按钮 -->
            <div class="flex justify-between mt-6">
                <button class="outline-btn">保存草稿</button>
                <button class="primary-btn">下一步</button>
            </div>
        </div>
    </div>
</body>
</html> 